<template>
	<view class="app-index">
		<NavBar title="与搭同行" :isHeight="false">
			<template #left>
				<view class="location" @click="handleChooseLoaction">
					<image src="/static/icons/location.svg" mode="" />
					临沂市
				</view>
			</template>
		</NavBar>
		<SwiperList />
		<view class="main-bg">
			<!-- 通知栏 -->
			<NotificationList />
			<!-- 功能按钮 -->
			<view class="action-buttons">
				<view class="button-item green">
					<image src="/static/index/post.svg" class="button-bg"></image>
					<!-- <text class="button-text">发布赛事</text> 
					<text class="button-desc">社会化竞赛</text> -->
				</view>
				<view class="button-item orange">
					<image src="/static/index/recruit.svg" class="button-bg"></image>
					<!-- <text class="button-text">招募代理</text>
					<text class="button-desc">利润翻倍</text> -->
				</view>
			</view>
			<!-- 排行榜 -->
			<RankingList />
		</view>
		<!-- 主要内容区 -->
		<view class="main-content">
			<!-- 赛事新闻 -->
			<view class="news-section">
				<view class="section-header">
					<view class="section-title">赛事新闻</view>
					<view class="more-link">更多
						<image src="/static/icons/arrow.svg" />
					</view>
				</view>
				<NewsList></NewsList>
			</view>
			<!-- 热门赛事 -->
			<view class="hot-events-section">
				<view class="section-title">热门赛事</view>
				<HotEventsList />
			</view>

		</view>
	</view>
</template>

<script setup>
import SwiperList from '@/components/SwiperList.vue'
import NotificationList from '@/components/NotificationList.vue'
import RankingList from '@/components/RankingList.vue'
import HotEventsList from '@/components/HotEventsList.vue'
import NewsList from '@/components/NewsList.vue'

//选择位置
const handleChooseLoaction = () => {
	uni.chooseLocation({
		success: function (res) {
			console.log('位置名称：' + res.name);
			console.log('详细地址：' + res.address);
			console.log('纬度：' + res.latitude);
			console.log('经度：' + res.longitude);
		}
	})
}
//获取当前位置
const getLocation = () => {
	uni.getLocation({
		type: 'wgs84', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
		success: function (res) {
			console.log('当前位置：' + res.latitude + ',' + res.longitude);
		}
	})
}
getLocation()

</script>

<style lang="scss" scoped>
.location {
	display: flex;
	align-items: center;
	gap: 6rpx;

	font-size: 28rpx;
	color: #303133;
	line-height: 40rpx;

	image {
		width: 32rpx;
		height: 32rpx;
	}
}

.app-index {
	min-height: 100vh;
	background: #F5F6F8;

	.main-bg {
		margin-top: -54rpx;
		background: linear-gradient(180deg, #FFFFFF 78%, #F5F6F8 100%);
		border-radius: 40rpx 40rpx 0 0;
		padding: 20rpx 28rpx 0 28rpx;
		position: relative;
		z-index: 1;
	}

	.main-content {
		padding: 20rpx 28rpx;
	}

	// 赛事新闻
	.news-section {
		margin-top: 52rpx;

		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 26rpx;

			.section-title {
				font-weight: 500;
				font-size: 36rpx;
				color: #000000;
				line-height: 40rpx;
			}

			.more-link {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #606266;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-left: 6rpx;
				}
			}
		}
	}

	// 热门赛事
	.hot-events-section {
		margin-top: 50rpx;

		.section-title {
			font-weight: 500;
			font-size: 36rpx;
			color: #000000;
			line-height: 40rpx;
			margin-bottom: 28rpx;
		}
	}

	// 功能按钮
	.action-buttons {
		display: flex;
		gap: 0 26rpx;
		margin-top: 24rpx;

		.button-item {
			flex: 1;

			.button-bg {
				width: 100%;
				height: 160rpx;
			}
		}
	}
}
</style>